<template>
	<view>
		<navbar title="拼多多返利" color="#fff" :bgColor="headrColor" :isZhanwei="false"></navbar>
		<view class="head-box" :style="{background:`url('${imgs.home.pdd}')`}">
			<view class="logo">
				<image :src="imgs.logos.pdd" mode=""></image>
			</view>
			<view class="text">拼多多 | 搜索商品返利</view>
			<view class="search-box">
				<view class="left-box">
					<u-icon color="#CCCCCC" style="margin-right: 16rpx;" name="search"></u-icon>
					<u-input placeholder="搜索拼多多商品" v-model="keys">
						<template slot="suffix">
							<u-icon name="close-circle"></u-icon>
						</template>
					</u-input>
					<!-- <text>搜索搜索拼多多商品</text> -->
				</view>
				<view class="right-box" @click="searchEvent">
					搜索
				</view>
			</view>
			<view class="setup-box">
				<view class="setup-title">复制拼多多商品链接，领返利</view>
				<view class="setups">
					<view class="item">
						<image :src="imgs.share" mode=""></image>
						<view class="item-info">
							<view>输入商品</view>
							<view>点击搜索</view>
						</view>
					</view>
					<view class="items">
						<image :src="imgs.arrow" mode=""></image>
					</view>
					<view class="item" >
						<image :src="imgs.logos.pdd" mode=""></image>
						<view class="item-info">
							<view>在<text>拼多多APP</text>上</view>
							<view>购买商品</view>
						</view>
					</view>
					<view class="items">
						<image :src="imgs.arrow" mode=""></image>
					</view>
					<view class="item">
						<image :src="imgs.logo" mode=""></image>
						<view class="item-info">
							<view>返回<text>名购岛</text></view>
							<view>领取返利</view>
						</view>
					</view>
				</view>

				<div class="setup-btn" @click="toPddEvent">
					前往拼多多
				</div>
			</view>
		</view>

		<div class="good-boxs">
			<div class="title">返利推荐</div>
			<div v-if="list.length">
				<goodPDD @clickHandle="clickHandle" :good="item" v-for="item in list" :key="item"></goodPDD>
			</div>
			<div v-else style="padding-top: 100rpx;">
				<u-empty margin-top="50rpx" mode="list"></u-empty>
			</div>
		</div>

		<u-modal v-model="show">

			1111
		</u-modal>
	</view>
</template>

<script>
	import imgs from '@/utils/imgs.js'
	import goodPDD from '../components/goodPDD/index.vue'
	import navbar from '../components/w-navbar/index.vue'
	export default {
		components: {
			navbar,
			goodPDD
		},
		data() {
			return {
				headrColor: 'transparent',
				imgs,
				list: [],
				keys: '',
				show: false,
				singleGoodInfo: {
					img: '',
					name: '',
					price: '',
					mall_name: '',
					goods_sign: ''
				}
			};
		},
		methods: {
			async toPddEvent() {
				const res = await this.$api.pddApi.toPdd()
				plus.runtime.openURL(res.data[0].single_url_list.url, function(res) {})
			},
			async searchEvent() {
				if (!this.keys) {
					return
				}
				this.$navTo('pageC/pddList/pddList', {
					key: this.keys
				})
			},
			async getList() {
				const res = await this.$api.pddApi.list()
				this.list = res.data.data
			},
			clickHandle(e) {
				this.$navTo('pageC/goods/goods', {
					id: e,
					type: 'pdd'
				})
			}
		},
		onLoad() {
			this.getList()
		},
		onPageScroll(e) {

			if (e.scrollTop > 58) {
				this.headrColor = '#F54E53'
			} else {
				this.headrColor = 'transparent'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head-box {
		height: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
		// box-sizing: border-box;
		// padding-top: 180rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.logo {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-bottom: 24rpx;

			>image {
				width: 100%;
				height: 100%;
			}
		}

		.text {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-bottom: 24rpx;
		}

		.search-box {
			width: 630rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 36rpx;
			padding: 8rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;

			.left-box {
				padding-left: 12rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #CCCCCC;
				display: flex;
				align-items: center;
			}

			.right-box {
				width: 160rpx;
				height: 56rpx;
				background: #FF8C19;
				border-radius: 36rpx;
				font-weight: 500;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
			}
		}

		.setup-box {
			position: absolute;
			bottom: -200rpx;
			width: 702rpx;
			height: 408rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-direction: column;

			.setup-btn { 
				width: 556rpx;
				height: 72rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				// background-image: linear-gradient(#FD7830 to #FD7830);
				// background-image: linear-gradient();
				background: linear-gradient(#FD7830 50%, #FD7830 50%);
				border-radius: 36rpx;
			}

			.setup-title {
				font-weight: bold;
				font-size: 28rpx;
				color: #333130;
				margin-bottom: 40rpx;
			}

			.setups {
				display: flex;
				align-items: center;
				margin-bottom: 102rpx;

				>.item {
					flex: 1;
					margin-right: 18rpx;
					position: relative;

					>image {
						width: 96rpx;
						height: 96rpx;
					}

					>.item-info {
						position: absolute;
						bottom: -70rpx;
						font-weight: 400;
						font-size: 24rpx;
						left: -50%;
						width: 200rpx;
						color: #666260;
						text-align: center;

						>view {
							>text {
								color: #FF8C19;
							}
						}
					}
				}

				.items {
					flex: 1;
					margin-right: 18rpx;

					>image {
						width: 86rpx;
						height: 20rpx;
					}
				}
			}
		}
	}


	.good-boxs {
		margin-top: 224rpx;

		// background-color: #fff;
		.title {
			font-weight: bolder;
			font-size: 36rpx;
			color: #333130;
			text-align: center;
			margin-bottom: 36rpx;
		}
	}
</style>